<ion-header mode="md">
  <ion-toolbar>
    <div class="nav">
      <div>
        <ion-icon
          name="location-outline"
          style="font-size: 20px; margin-right: 5px"
        ></ion-icon
        ><span>{{city??'未选择'}}</span>
      </div>
      <ion-segment
        value="pizza"
        mode="ios"
        (ionChange)="segmentChanged($event)"
      >
        <ion-segment-button value="pizza">
          <ion-label>电影</ion-label>
        </ion-segment-button>
        <ion-segment-button value="pasta">
          <ion-label>影院</ion-label>
        </ion-segment-button>
      </ion-segment>
      <ion-icon style="font-size: 20px" name="search"></ion-icon>
    </div>
  </ion-toolbar>

  <!-- 二级标签 -->
  <ion-segment mode="md" class="sub" value="1" (ionChange)="loadLists($event)">
    <ion-segment-button value="1">
      <ion-label>正在热映</ion-label>
    </ion-segment-button>
    <ion-segment-button value="2">
      <ion-label>即将上映</ion-label>
    </ion-segment-button>
  </ion-segment>
</ion-header>

<ion-content #content>
  <!-- 正在热映/ -->
  <ion-item lines="none" *ngFor="let item of lists">
    <img width="80px" [src]="item.cover" />
    <div class="cell">
      <div>{{item.moviename}}</div>
      <div>{{item.actors }}</div>
      <div>
        <div>电影评分 <span>{{item.score}}</span></div>
        <ion-button color="danger" shape="round">购票</ion-button>
      </div>
    </div>
  </ion-item>
  <!-- 触底加载 -->
  <ion-infinite-scroll
    threshold="25%"
    [disabled]="false"
    position="bottom"
    (ionInfinite)="loadData($event)"
  >
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data..."
    >
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <!-- 下拉刷新 -->
  <ion-refresher
    slot="fixed"
    (ionRefresh)="doRefresh($event)"
    pullFactor="0.8"
    pullMin="60"
    pullMax="120"
  >
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</ion-content>
